<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/element-ui/index.css">
    <link rel="stylesheet" href="../../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
            props 提供两种作用
                1. 简化传递属性数据的获取方式;
                        props:[被拦截的属性名,……]
                2. 提供子组件传递属性数据安全校验功能【是为开发这提供的信息提示】
                   实际项目开发中可能会使用外部提供的三方组件库，而组件库是被彻底封装的代码，
                   内部可能需要接收传递数据，但数据如果类型错误需要告知开发者
                        props:{
                            // key : 被拦截的属性名
                            // value : JS类型构造器，用于提示组件接受的属性数据必须是某种类型数据
                            // value : 取值Object对象，通过固定的属性描述固定的校验功能
                            //          type类型限制 取值 JS类型构造器
                            //          default默认值定义 当拦截属性为数组或对象这种引用数据时，必须以工厂函数的方式返回默认
                            //                            为了避免默认值被共享的情况出现
                            //          required必传属性的限制
                            //          validator提供自定义校验规则的执行方法，取值function(val){} => val是传入的数据
                            //                   当方法返回false表示校验失败，当方法返回true表示校验成功
                        }
        </pre>
        <el-button type="primary">Primary</el-button>
        <!-- <el-button type="primary" round="asdasdsa">Primary</el-button> -->
        <el-button type="primary" :round="true">Primary</el-button>

        <h5>父组件</h5>
        <p>num:{{ num }}</p>
        <p>num1:{{ num1 }}</p>
        <input v-model="num1" type="text" />

        <my-comp 
            :num="num" 
            :info=" '父组件传入的匿名字符串' "
            :arr=" [1,2,3,4,5] "
            :msg=" 'abcdefg' "
            :age=" 1000 "
        ></my-comp>
        <my-comp :num="num1" :msg=" '123456' "></my-comp>
    </div>

    <script type="text/x-template" id="myComp">
        <div class="cbox" itany="网博">
            <h5>子组件</h5>
            <p>保留两位小数输出num数据:{{ num.toFixed(2) }}</p>
            <p>info:{{ info }}</p>
            <p>arr:{{ arr }}</p>
            <p>msg:{{ msg }}={{ msg.split("") }}</p>
            <p>用户年龄：age:{{ age }}</p>
        </div>
    </script>

    <script src="../../assets/vue3/vue.global.js"></script>
    <script src="../../assets/element-ui/index.full.js"></script>
    <script>
        // 子组件实例
        const MyComp = {
            template:"#myComp",
            // props:["num"]
            props:{
                // 必须是Number类型数据的校验
                num:Number,
                // info:String,
                info:{
                    // 必须是String类型的数据校验
                    // 如果没有传入该属性默认值为 info默认值
                    type:String,
                    default:"info默认值"
                },
                arr:{
                    type:Object,
                    // default:[]
                    default:function(){
                        return []
                    }
                },
                msg:{
                    type:String,
                    required:true
                },
                age:{
                    type:Number,
                    default(){
                        return 18
                    },
                    validator:function(val){
                        console.log(val)
                        // return val>=0&&val<=150
                        if(val<0||val>150){
                            // console.log(" age取值必须在0~150之间 ")
                            console.warn(" age取值必须在0~150之间 ")
                        }
                        return true; // 关闭vue自带的提示操作
                    }
                }
            }
        }

        // 父组件实例
        Vue.createApp({
            components: {
                MyComp,
            },
            data() {
                return {
                    num:100,
                    num1:0
                }
            },
        })
        // 安装 element ui 组件库 - 提供定义好的可复用的全局组件
        .use(ElementPlus)
        .mount("#app")
    </script>
</body>
</html>